<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	.active{
				width: 100px;
				height: 100px;
				border:1px solid olivedrab;
			}
			.bigBox{
				width: 300px;
				height: 300px;
				border:1px solid orange;
			}
	    </style>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script type="text/babel">
		
		//组件1
		 var Lee=React.createClass({
		 	
		 		
		 		getDefaultProps(){ 
		 			return{  //默认属性
		 				sex:"女"
		 			}
		 			
		 		},
		 		propTypes:{ //验证 props
		 			//设置title属性验证规则，必须输字符串
		 			title:React.PropTypes.number.isRequired
		 		},
		 		render(){
		 			return(
		 				<div>
		 			<button>你好 { this.props.aaa } </button>
		 			<b>{this.props.sex}</b>
		 			<b>{this.props.title}</b>
		 			</div>
		 		   )
		 		}
		 	
		 })


		//组件2 
		function MyDiv(props){
			return (
				<div className="active">
					<Lee aaa={props.content}  title="你好" />
					{props.content}
				</div>
			)
		}

   
        // 组件三
		class MyBox extends React.Component{
			render(){
				return(
					<div className="bigBox">
						<h3>{this.props.name}==>{this.props.title}</h3>
						<MyDiv content={this.props.name} />
					</div>
				)
			}
		}
		 
		 //渲染
		 var app =document.getElementById("app")
		ReactDOM.render(<MyBox name="lily" title="how are you"/>,app)
		 
	</script>
</html>
